<template>
  <div>
    <div class="tag-title">
      客群规模：
      <span class="targetCount">193671623</span>
      <span> 刷新 </span>
      <span>清空规则</span>
    </div>
    <el-tree
      :data="treeData2"
      :expand-on-click-node="false"
      ref="tree2"
      class="tree custom-tree"
      node-key="id"
      draggable
      default-expand-all
      :allow-drop="returnTrue"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <div>
          <i
            class="union-type"
            :style="{
              display: node.childNodes.length > 1 ? 'block' : 'none',
              top: node.childNodes.length * 18 + 'px'
            }"
            @click="toggleUnionType(data)"
            >{{ unionTypeTxt[data.unionType] || '且' }}</i
          >
          <span class="el-tree-node__label tag-name">{{ node.label }}</span>
          <span>
            <el-select v-model="data.calType" placeholder="请选择" size="mini">
              <el-option label="=" value="="> </el-option>
              <el-option label="≠" value="!="> </el-option>
            </el-select>
          </span>
          <span class="el-tree-node__label tag-label"
            >Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
            fugit ea voluptates nobis iste non quod numquam repudiandae esse,
            nisi est a quos delectus voluptatum animi cupiditate earum tenetur
            et.</span
          >
          <span class="delete-btn">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-circle-close"
              @click="() => removeNode(node, data)"
            >
            </el-button>
          </span>
        </div>
        <span>
          <span class="special-tag">周期</span>
          <span>1593687.7万</span>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData2: [
        {
          id: 2,
          label: '全量标签',
          unionType: 'and',
          calType: '='
        },
        {
          id: 2,
          label: '全量标签',
          unionType: 'and',
          calType: '='
        },
        {
          id: 2,
          label: '全量标签',
          unionType: 'and',
          calType: '='
        }
      ],
      unionTypeTxt: {
        and: '且',
        or: '或'
      }
    }
  },
  methods: {
    allowDrag(node) {
      return node.isLeaf
    },
    handleDragstart(node, event) {
      if (node.isLeaf) {
        // 如果是叶子节点才能拖拽
        this.$refs.tree2.$emit('tree-node-drag-start', event, { node: node })
      }
    },
    handleDragend(draggingNode, endNode, position, event) {
      // 插入一个空节点用于占位
      let emptyData = { id: +new Date(), children: [], calType: '=' }
      console.log(this.$refs)
      this.$refs.tree0.insertBefore(emptyData, draggingNode)

      this.$refs.tree2.$emit('tree-node-drag-end', event)
      this.$nextTick(() => {
        // 如果是移动到了当前树上，需要清掉空节点
        if (this.$refs.tree1.getNode(draggingNode.data)) {
          this.$refs.tree1.remove(emptyData)
        } else {
          // 如果移动到了别的树上，需要恢复该节点，并清掉空节点
          let data = JSON.parse(JSON.stringify(draggingNode.data))
          this.$refs.tree1.insertAfter(
            data,
            this.$refs.tree1.getNode(emptyData)
          )
          this.$refs.tree1.remove(emptyData)
        }
      })
    },
    returnTrue() {
      return true
    },
    returnFalse() {
      return false
    },
    removeNode(node) {
      // console.log(node)
      this.$refs.tree2.remove(node)
    },
    toggleUnionType(data) {
      data.unionType = data.unionType === 'and' ? 'or' : 'and'
    }
  }
}
</script>

<style scoped>
.tag-title {
  margin: 20px 0;
}
.targetCount {
  color: rgba(236, 137, 32, 100);
}

.tag-tree,
.custom-tree {
  width: 100%;
}
/* .tree {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  font-size: 16px;
  overflow-x: hidden;
} */
/* 树形结构节点添加连线 */
.custom-tree .el-tree-node {
  position: relative;
  padding-left: 16px;
  margin: 5px 0;
}

.custom-tree .el-tree-node__children {
  padding-left: 16px;
}

.custom-tree .el-tree-node :last-child:before {
  height: 38px;
}

.custom-tree .el-tree > .el-tree-node:before {
  border-left: none;
}

.custom-tree.el-tree > .el-tree-node:after {
  border-top: none;
}

.custom-tree .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.custom-tree > .el-tree-node:before {
  display: none;
}

.custom-tree .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
/* .custom-tree .el-tree-node__expand-icon.is-leaf {
  display: none;
} */
::v-deep.custom-tree .el-tree-node .el-tree-node__content {
  padding-left: 0 !important;
  height: 32px !important;
}

.custom-tree .el-tree-node .el-tree-node__content .expanded {
  pointer-events: none;
  z-index: 1;
}

.custom-tree .el-tree-node:before {
  border-left: 1px dashed #b8b9bb;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.custom-tree .el-tree-node:after {
  border-top: 1px dashed #b8b9bb;
  height: 20px;
  top: 12px;
  width: 28px;
}
.custom-tree-node {
  width: 100%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-tree-node .union-type {
  display: none;
  content: '且';
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  background: #ccc;
  color: #606266;
  position: absolute;
  left: 18px;
  top: 0;
  z-index: 1;
  font-style: normal;
}

.custom-tree-node span {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
.custom-tree-node .delete-btn {
  margin-left: 5px;
}
.custom-tree-node .tag-name,
.tag-label {
  height: 20px;
  line-height: 20px;
  padding: 4px 8px;
  background: #a2c4f9;
}
.custom-tree-node .tag-label {
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-tree-node .el-select--mini {
  width: 60px;
  margin: 0 5px;
}
/* .custom-tree-node .el-select--mini .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
} */
.custom-tree-node .special-tag {
  border: 1px solid rgba(53, 32, 244, 100);
  color: rgba(53, 32, 244, 100);
  display: inline-block;
  padding: 0 5px;
  margin-right: 5vh;
}
</style>